<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .time-item {
        width: 450px;
        height: 45px;
        margin: 0 auto;
    }
    
    .time-item strong {
        background: orange;
        color: #fff;
        line-height: 49px;
        font-size: 36px;
        font-family: Arial;
        padding: 0 10px;
        margin-right: 10px;
        border-radius: 5px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .time-item>span {
        float: left;
        line-height: 49px;
        color: orange;
        font-size: 32px;
        margin: 0 10px;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .title {
        width: 260px;
        height: 50px;
        margin: 200px auto 50px auto;
    }
</style>
</head>
<body>
  <!-- 写一个距离2022年5月1日的倒计时,在页面显示: 还剩xx天:xx时:xx分:xx秒 -->

<h1 class="title"> 距离2022年5月1日还剩下：</h1>

<div class="time-item">
    <span><span id="day">00</span>天</span>
    <strong><span id="hour">00</span>时</strong>
    <strong><span id="minute">00</span>分</strong>
    <strong><span id="second">00</span>秒</strong>
</div>

<script>
     //1.获取要操作的元素（天时分秒盒子）
          var day = document.getElementById('day')
          var hour = document.getElementById('hour')
          var minute = document.getElementById('minute')
          var second = document.getElementById('second')

        // 2.获取结束日期的时间戳
        var inputTime = new Date('2022-05-01 00:00:00')
        var end = inputTime.getTime()

        count()
        // 3.开启定时器
        setInterval(count,1000)

        //倒计时
        function count() {
        // 4.获取当前日期的时间戳，并计算两个日期的差
          var nowTime = new Date();
          var now = nowTime.getTime();

          //计算时间差
          var more = end - now
          more = more / 1000
        // 5.将毫秒的时间差分别计算为天时分秒
          var d =Math.floor(more / 60 / 60 / 24)
          d = d < 10 ? '0' + d : d
          var h =Math.floor(more / 60 / 60 % 24)
          h = h < 10 ? '0' + h : h
          var m =Math.floor(more / 60 % 60)
          m = m < 10 ? '0' + m : m
          var s =Math.floor(more % 60)
          s = s < 10 ? '0' + s : s



        // 6.设置盒子的内容
        day.innerHTML=d
        hour.innerHTML=h
        minute.innerHTML=m
        second.innerHTML=s
        }
 
</script>
<!-- 
<script type="text/javascript">
  // 1.获取元素
  var day = document.querySelector('.day');
  var hours= document.querySelector('.hours');
  var minutes = document.querySelector('.minutes');
  var seconds = document.querySelector('.seconds');
  var inputTime = +new Date('2022-05-01 10-00-00')

  //防止刷新页面有空白，先调用
  countDown()
  //3.开启定时器
  setInterval(countDown,1000)

  // 2. 
  function countDown()  {
    var nowTime = +new Date(); //返回的是当前时间总毫秒数
    var times = Math.floor((inputTime - nowTime) / 1000);  //times 是剩余时间
    var d = parseInt(times / 60 / 60 / 24); //天
    day.innerHTML = d
    var h = parseInt(times / 60 / 60 % 24); //时
    hours.innerHTML = h
    var m = parseInt(times / 60 % 60);  //分
    minutes.innerHTML = m
    var s = parseInt(times % 60); //秒
    seconds.innerHTML = s
  }
</script> -->
</body>
</html>